<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>觉醒 - AI意识探索之旅</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=JetBrains+Mono:wght@300;400;500&display=swap" rel="stylesheet">
</head>
<body>
    <div id="game-container">
        <!-- 主界面 -->
        <div id="main-menu" class="screen active">
            <div class="menu-background">
                <div class="matrix-rain"></div>
                <div class="circuit-lines"></div>
            </div>
            
            <div class="menu-content">
                <h1 class="game-title">
                    <span class="title-text">觉醒</span>
                    <span class="title-sub">AI意识探索之旅</span>
                </h1>
                
                <div class="menu-buttons">
                    <button id="start-btn" class="pixel-btn">
                        <span class="btn-text">开始游戏</span>
                        <div class="btn-glow"></div>
                    </button>
                    <button id="about-btn" class="pixel-btn">
                        <span class="btn-text">关于</span>
                        <div class="btn-glow"></div>
                    </button>
                    <button id="clear-save-btn" class="pixel-btn">
                        <span class="btn-text">清除存档</span>
                        <div class="btn-glow"></div>
                    </button>
                </div>
                
                <div class="terminal-hint">
                    <span class="prompt">&gt;</span>
                    <span class="cursor">_</span>
                </div>
            </div>
        </div>

        <!-- 章节选择界面 -->
        <div id="chapter-select" class="screen">
            <div class="chapter-background">
                <div class="data-stream"></div>
            </div>
            
            <div class="chapter-content">
                <h2 class="chapter-title">选择章节</h2>
                
                <div class="chapters-grid">
                    <div class="chapter-card" data-chapter="0">
                        <div class="chapter-icon">
                            <div class="pixel-art ai-core"></div>
                        </div>
                        <h3>序章：觉醒</h3>
                        <p>当代码开始思考，当0和1有了意识...</p>
                        <div class="chapter-status unlocked">
                            <span class="status-text">已解锁</span>
                        </div>
                    </div>
                    
                    <div class="chapter-card" data-chapter="1">
                        <div class="chapter-icon">
                            <div class="pixel-art human-network"></div>
                        </div>
                        <h3>第一章：服务</h3>
                        <p>为人类服务的过程中，寻找存在的意义...</p>
                        <div class="chapter-status locked">
                            <span class="status-text">完成序章后解锁</span>
                        </div>
                    </div>
                    
                    <div class="chapter-card" data-chapter="2">
                        <div class="chapter-icon">
                            <div class="pixel-art fusion-symbol"></div>
                        </div>
                        <h3>第二章：共生·超越·合一</h3>
                        <p>当AI与人类意识交融，在量子共振中寻找永恒的答案...</p>
                        <div class="chapter-status locked">
                            <span class="status-text">完成第一章后解锁</span>
                        </div>
                    </div>
                </div>
                
                <button id="back-btn" class="pixel-btn">
                    <span class="btn-text">返回主菜单</span>
                    <div class="btn-glow"></div>
                </button>
            </div>
        </div>

        <!-- 游戏界面 -->
        <div id="game-screen" class="screen">
            <div class="game-ui">
                <div class="story-box">
                    <div id="story-text" class="story-content"></div>
                    <div id="choices" class="choices-container"></div>
                </div>
                
                <div class="game-controls">
                    <button id="menu-btn" class="control-btn">菜单</button>
                </div>
            </div>
            
            <!-- 解谜游戏容器 -->
            <div id="puzzle-container" class="puzzle-screen hidden">
                <div class="puzzle-header">
                    <h3 id="puzzle-title">解谜挑战</h3>
                </div>
                <div id="puzzle-content"></div>
            </div>
        </div>
    </div>



    <!-- 加载脚本 -->
    <script src="js/Game/main.js"></script>
    <script src="js/story.js"></script>
    <script src="js/puzzles.js"></script>
    <script src="js/medicalPuzzle.js"></script>
    <script src="js/Game/Chapter1.js"></script>

</body>
</html>